<template>
  <div
    :isShowToolsPanel="isShowToolsPanel"
    :isActivedComponent="isActivedComponent"
    v-show="isShowToolsPanel"
    class="flex w-[100%] flex-col h-screen animate__animated animate__fadeInLeft animate__animated duration-400 dark:bg-zinc-900 bg-gray-200"
  >
    <!-- 顶部导航栏 -->
    <header
      class="flex items-center justify-between p-2 bg-gray-200 dark:bg-zinc-900 duration-900 text-gray-900 dark:text-gray-100 shadow-md"
    >
      <h1 class="text-lg font-semibold">{{ currentTitle }}</h1>
      <My-button
        type="primary"
        :icon="
          usethemeStore.currentTheme.theme == 'dark' ? 'darkClose' : 'close'
        "
        @click="closeToolsPanel"
      ></My-button>
    </header>
    <div class="flex flex-1 overflow-hidden">
      <!-- 左侧导航栏 -->
      <aside
        class="w-[18%] dark:bg-zinc-900 text-gray-900 dark:text-gray-200 shadow-md overflow-y-auto border-blue-50"
      >
        <div
          @click="changeComponent(k.name)"
          v-for="k in renderList"
          :key="k.name"
          class="flex p-2 items-center dark:bg-zinc-900 hover:bg-blue-200 cursor-pointer"
          :class="k.isActived ? 'dark:bg-neutral-800 bg-blue-200' : ''"
        >
          <My-svg-icon :name="k.icon" class="w-4 h-4"></My-svg-icon>
          <div class="ml-2">
            <p class="text-sm font-semibold">{{ k.name }}</p>
            <p class="text-xs text-gray-500 truncate">{{ k.info }}</p>
          </div>
        </div>
      </aside>
      <!-- 动态组件渲染 -->
      <div class="flex-1 p-4">
        <keep-alive>
          <component :is="currentShowComponent"></component>
        </keep-alive>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  defineAsyncComponent,
  ref,
  shallowRef,
  defineProps,
  defineEmits,
  watch,
  toRef
} from 'vue'
import themeStore from '@/store/theme/index.js'

const usethemeStore = themeStore()

// 异步加载组件
const props = defineProps({
  isShowToolsPanel: {
    type: Boolean,
    default: false
  },
  isActivedComponent: {
    type: String,
    default: 'OpenAi'
  }
})
const OpenAi = defineAsyncComponent(() => import('../chat/index.vue'))
const CodeSpace = defineAsyncComponent(() => import('../codespace/index.vue'))
const LeaveMessage = defineAsyncComponent(
  () => import('../leaveMessage/index.vue')
)
const RepairLog = defineAsyncComponent(() => import('../RepairLog/index.vue'))
// 渲染列表
const renderList = [
  {
    name: 'ChatGpt',
    info: '对话助手',
    icon: 'OpenAi',
    component: OpenAi,
    headTitle: 'Chat With OpenAI',
    isActived: true
  },
  {
    name: 'CodeSpace',
    info: '代码编辑器',
    icon: 'Codespace',
    component: CodeSpace,
    headTitle: 'CodeSpace PlayGround',
    isActived: false
  },
  {
    name: 'LeaveMessage',
    info: '意见收集',
    icon: 'remind',
    component: LeaveMessage,
    headTitle: 'LeaveMessage',
    isActived: false
  },
  {
    name: 'RepairLog',
    info: '修复日志',
    component: RepairLog,
    headTitle: 'RepairLog',
    isActived: false,
    icon: 'Repair'
  }
]
// 渲染组件标题
const currentTitle = ref('')
//渲染组件
const isActivedComponent = toRef(props, 'isActivedComponent')
const currentShowComponent = shallowRef(null)
//确认当前需要渲染的组件该方法是通过props点击切换组件
const computedCurrentShowComponent = (componentName) => {
  //切换高亮状态
  renderList.forEach((item) => {
    if (item.icon === componentName) {
      item.isActived = true
      currentTitle.value = item.headTitle
      currentShowComponent.value = item.component
    } else {
      item.isActived = false
    }
  })
}
watch(
  isActivedComponent,
  (newVal) => {
    computedCurrentShowComponent(newVal)
  },
  {
    immediate: true
  }
)
// 切换组件的方法(侧边栏切换)
const changeComponent = (componentName) => {
  renderList.forEach((item) => {
    if (item.name === componentName) {
      currentShowComponent.value = item.component
      ;(currentTitle.value = item.headTitle), (item.isActived = true)
    } else {
      item.isActived = false
    }
  })
}
const emit = defineEmits(['update-value'])
const closeToolsPanel = () => {
  emit('update-value', false)
}
</script>
